<template>
  <div class="area-map">
    <div id="container"></div>
  </div>
</template>
<script>
  export default {
    name: 'area-map',
    data() {
      return {
        parkPng: require('@/assets/bigDataSourceImage/carmera.png'),
      }
    },
    mounted() {
      this.goMap();
    },
    methods: {
      goMap() {
        var container = document.getElementById('container');
        var map = new AMap.Map("container", {
          zoom: 13,
          center: [114.53952, 38.03647],//中心点坐标
          mapStyle: 'amap://styles/grey',
          resizeEnable: true
        });
        map.setFeatures(['road']);

        var icon = new AMap.Icon({
          size: new AMap.Size(22, 20),
          image: require('@/assets/bigDataSourceImage/carmera.png'),
          imageSize: new AMap.Size(22,20),
        });

        parkingMarker();
        function parkingMarker() {
        	let positions = [ {'lan': 114.53952, 'lat':  38.03647, name: '久富大厦'}, {'lan': 114.53902, 'lat':  38.04647, name: '科技中心'}, {'lan': 114.53252, 'lat':  38.03047, name: '拓德假日酒店'} ]
        	let length = positions.length;
        	let array = []
        	for(var i=0; i<length; i++) {
        		var marker = new AMap.Marker({
        			position: [ positions[i].lan, positions[i].lat ],
              icon: icon,
              title:positions[i].name
        		})
        		array.push(marker)
        	}
        	map.add(array);
        }

      }
    }
  }
</script>

<style scoped>
  .area-map {
    height: 100%;
    border: 1px solid transparent;
    border-image-source: url('../../../../assets/bigDataSourceImage/box1.png');
    border-image-slice: 26 26 26 26;
    border-image-repeat: stretch;
    border-image-width: 26px;
    box-sizing: border-box;
    padding: 1em;
  }

  #container {
  	width: 100%;
  	height: 100%;
    border: 1px solid #096A94;
  }
  .marker-bus {
    height: 30px;
    width: 30px;
    background-color: red;
  }

  .marker {
  	width: 12px;
  	height: 12px;
  	border-radius: 50%;
  	background-color: lightgreen;
  	/* animation: myfirst 3s linear infinite; */
  	position: relative;
  }
  .marker::after {
  	position: absolute;
  	content: '';
  	top: 0;
  	left: 0;
  	width: 12px;
  	height: 12px;
  	border-radius: 50%;
  	background-color: lightgreen;
  	animation: myfirst 3s linear infinite;
  }
  @keyframes myfirst {
  	0% {
        opacity: 0.8;
      }

      30% {
  		transform: scale(1.8);
          opacity: 0.5;
      }

      100% {
        transform: scale(2.6);
        opacity: 0;
      }

  }


</style>
